<template>
	<view>
		<view class="address-box">
			<!-- 选择收货地址的盒子 -->
			<view class="address-choose-box" v-if="JSON.stringify(address)==='{}'">
				<button type="primary" size="mini" class="btnAddress" @click="chooseAddress"> 请选择收货地址+</button>
			</view>
			<!--渲染收货地址 -->
			<view class="address-info-box" v-else @click="chooseAddress">
				<view class="row1">
					<view class="row1-left">
						<view class="username">
							收货人: <text>{{address.username}}</text>
						</view>
					</view>
					<view class="row1-right">
						电话: <text>{{address.telNumber}}</text>
						<text>></text>

					</view>
				</view>
				<view class="row2">
					<view class="row2-left">
						收货地址:
					</view>
					<view class="row2-right">
						{{addStr}}
					</view>

				</view>
			</view>
		</view>


	</view>

</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutations
	} from 'vuex'
	export default {
		name: "my-address",
		data() {
			return {
				// address: {

				// },


			};
		},

		computed: {
			...mapState('my_user', ['address']),
			//将my_user模块中的 addStr映射到组件中使用 
			...mapGetters('my_user', ['addStr']),

		},
		methods: {
			...mapMutations('my_user', ['updateAddress']),
			async chooseAddress() {

				const res = await uni.chooseAddress().catch(err => err)
				if (res.errMsg === 'chooseAddress:ok') {
					// console.log(res)
					this.updateAddress(res)
				}

			}
		}
	}
</script>

<style lang="scss">
	.address-box {
		display: flex;
		height: 150px;
		border-bottom: 10px solid #dcdcdc;
		justify-content: center;
		align-items: center;



		.address-info-box {
			font-size: 18px;
			height: 90px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding: 5px 0;

			.row1 {
				display: flex;
				justify-content: space-between;


				.row1-right {
					display: flex;




				}
			}

			.row2 {
				display: flex;
				margin-top: 10px;
				justify-content: space-between;


				.row2-left {
					// 不换行
					white-space: nowrap;
				}
			}
		}

	}
</style>